<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
    <script src="task.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;outline:none;font:400 14px/24px "Microsoft YaHei",微软雅黑,arial}
        body{padding:10px}
        fieldset {
            width:728px;
            margin-bottom: 10px;
            padding: 10px;
            vertical-align: middle;
            border: 1px solid #ccc;
        }
        
        fieldset label {
            float: left;
            margin-right: 10px;
        }
        
        #wrapper {
            width: 750px;
            margin: 0 auto;
        }
        
        #aqi-chart-wrap {
            display: -webkit-flex; /* for webkit */
            display: flex;
            align-items: flex-end;
            border: 1px solid #ccc;
            padding: 10px;
            *zoom: 1;
            width: auto;
            height: auto;
            position: relative;
            padding-top: 38px;
        }
        
        #aqi-chart-wrap div {
            display: inline-block;
        }
    
    
    </style>
  </head>
<body>
  <div id="wrapper">
      <fieldset id="form-gra-time">
        <legend>请选择日期粒度：</legend>
        <label>日<input name="gra-time" value="day" type="radio" checked="checked"></label>
        <label>周<input name="gra-time" value="week" type="radio"></label>
        <label>月<input name="gra-time" value="month" type="radio"></label>
      </fieldset>

      <fieldset>
        <legend>请选择查看的城市：</legend>
        <select id="city-select">

        </select>
      </fieldset>

      <div id="aqi-chart-wrap">
      
      </div>
    </div>  
</body>
</html>